<template>
    <div id="app">
    <header>
        <van-nav-bar title="防疫知识">
            <template #left>
                <van-icon name="arrow-left" size="18"  @click="back"/>
            </template>
        </van-nav-bar>
        <van-search v-model="value" placeholder="请输入搜索关键词" @focus="search"/>
    </header>

    <main>
        <van-tabs v-model="active">

        <van-tab title="远离谣言 "><van-divider />
            <div class="list">
            <div class="listtext">
                <p>多戴几层口罩才可以预防病毒是真的吗？</p>
                <div class="text">
                <p>北京某某医疗平台</p>
                <p>99评</p>
                </div>
                
                
            </div>
            <van-image
            width="120"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            </div>
            <van-divider />
            <div class="list">
            <div class="listtext">
                <p>多戴几层口罩才可以预防病毒是真的吗？</p>
                <div class="text">
                <p>北京某某医疗平台</p>
                <p>99评</p>
                </div>
                
                
            </div>
            <van-image
            width="120"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            </div>
            <van-divider />
            <div class="list">
            <div class="listtext">
                <p>多戴几层口罩才可以预防病毒是真的吗？</p>
                <div class="text">
                <p>北京某某医疗平台</p>
                <p>99评</p>
                </div>
                
                
            </div>
            <van-image
            width="120"
            height="80"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            </div>
            <van-divider />
        </van-tab>

        <van-tab title="返程防控 "><van-divider /></van-tab>

        <van-tab title="生活预防 "><van-divider /></van-tab>
        </van-tabs>
      
    
    </main>
        
    </div>
</template>

<script>
import router from '@/router';

   export default {
    data() {
        return {
            value:"",
            active: 0,
        }
    },
    methods: {
        search(){
            this.$router.push("/search")
        },
        back(){
            this.$router.go(-1)
        }
    }
   }
</script>

<style scoped lang="less">
    p{
        margin: 0;
    }
    main{
        .van-tabs{
            .van-tabs__content{
                .van-tab__pane{
                    .list{
                        display: flex;
                        padding: 10px;
                        .listtext{
                            margin-right: 10px;
                            position: relative;
                            .text{
                                display: flex;
                                color: #666666;
                                font-size: 12px;
                                position: absolute;
                                bottom: 4px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>